/**
    新框架尝试(基于elementUi)
    time：2020/03/25 
    by:xq
*/

$themeColor:#2196f3;
$borderColor:#EBEEF5;
$borderColor-gray:#29384a;
$fontColor-gray:#999;
body {
    background: #f0f2f5;
}

.hasClick,
.hasClick img {
    pointer-events: auto;
}

.sanfan {
    .border {
        border-top-width: 1px;
        border-color: #eee;
        border-top-style: solid;
        &.dashed {
            border-top-style: dashed;
        }
        &.dotted {
            border-top-style: dotted;
        }
    }
    .link {
        color: $themeColor;
        cursor: pointer;
        &:hover{
            text-decoration: underline;
        }
    }
    .navBar {
        margin-bottom: 15px;
    }
    .container {
        background: #fff;
        min-height: 300px;
    }
    //tip
    .tip {
        font-size: 12px;
        color: #999;
    }
    // 分页
    .el-pagination {
        padding: 20px;
    }
    //表格查询条件
    .tableSearchBox {
        padding: 15px 0px 5px 20px;
        padding-right: 10px;
        min-height: 45px;
        border-bottom: 1px dotted $borderColor;
        .el-form-item {
            
            margin-bottom: 10px;
        }
        .el-form-item--medium .el-form-item__label,
        .el-form-item__label {
            min-width: 90px;
            color: $fontColor-gray;
        }
        &.hasPrint .el-form-item {

            float: left;
            &:last-child{
                //带打印按钮加大间距（四个按钮）
                margin-right: 440px;
            }
        }
        &.hasPrintCurrent .el-form-item {
            float: left;
            &:last-child{
                //带打印按钮加大间距（打印当前页，两个按钮）
                margin-right: 170px;
            }
        }
        &::after {
            content: "";
            display: block;
            clear: both;
        }
    }
    //打印按钮
    .table_btn {
        float: right;
        padding: 10px;
        margin-top: -55px;
    }
    //表格  #fafafa
    .sanfan-table {
        &.el-table th,
        &.el-table thead.is-group th {
            background-color: #fafafa; //$themeColor;
            padding: 8px 0;
            //   font-size: 14px;
            //   color: #fff;
        }
        &.el-table td {
            // padding: 10px 0;
            padding: 5px 0;
        }
        &.el-table .cell {
            padding: 0 5px;
        }
        &.el-table--striped .el-table__body tr.el-table__row--striped td {
            background: #f8fdff;
        }
    }
    //线形选项卡
    .tabs-borderCard {
        .el-tabs__header {
            padding: 0 20px;
            margin: 0;
        }
        .el-tabs__item {
            line-height: 60px;
            height: 60px;
        }
    }
    //左侧树
    .leftTreeHd {
        border: 1px solid $borderColor;
        border-bottom: 0;
        background-color: #fafafa;
        height: 48px;
        line-height: 48px;
        margin: 20px 0px -20px 20px;
        padding: 0px 10px;
        .title {
            font-size: 16px;
            color: $themeColor;
        }
    }
    .leftTree {
        border: 1px solid $borderColor;
        margin: 20px 0 0 20px;
        padding: 20px 10px;
    }
    //表单
    .sanfan-form {
        .el-select {
            width: 100%;
        }
    }
    //必填
    .must>.el-form-item__label:before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
    }
    //sanfan-box-card
    .sanfan-boxCard {
        border: 1px solid $borderColor;
        line-height: 24px;
        width: 100%;
        label {
            color: #999;
        }
        .hd {
            border-bottom: 1px solid $borderColor;
            background-color: #fafafa;
            height: 48px;
            line-height: 48px;
            margin: 0px;
            padding: 0px 10px;
            .title {
                font-size: 16px;
                color: $themeColor;
            }
        }
        .bd {
            padding: 20px;
        }
    }
    .sanfan-detailBox {
        padding: 0 20px;
        .hd {
            padding-top: 20px;
            padding-bottom: 20px;
            .title {
                color: rgba(0, 0, 0, .85);
                font-weight: 700;
                font-size: 16px;
            }
        }
        .bd {
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
        }
        .label {
            color: #999;
            width: 100px;
            display: inline-block;
        }
        .detailTable {
            width: 100%;
            table-layout: fixed;
            td {
                padding: 0;
                line-height: 24px;
            }
        }
    }
    .tableDetail {
        margin-bottom: 20px;
        // border: 1px solid $borderColor;
        .table {
            width: 100%;
            font-size: 14px;
            border-collapse: collapse;
            // table-layout: fixed;
            th,
            td {
                border: 1px solid $borderColor;
                padding: 10px;
                min-width: 100px;
            }
            th {
                background: #fafafa;
                text-align: right;
                width: 100px;
                color: #505155;
                font-weight: 400;
            }
            td {
                text-align: left;
            }
        }
        .sanfan-table {
            border-collapse: collapse;
            border: 1px solid $borderColor;
            th {
                border-bottom: 1px solid $borderColor;
                width: 150px;
                padding: 10px !important;
            }
        }
    }
    .sanfan-fieldset {
        border: 1px solid #E4E7ED;
        padding: 0px 20px;
        border-radius: 5px;
        list-style: none;
        legend {
            color: #333;
            font-weight: bold;
            font-size: 16px;
            padding: 20px;
            .el-dropdown {
                cursor: pointer;
                font-size: 16px;
                color: #333;
                // color: $themeColor;
            }
        }
    }
    .table_rowBtn {
        width: 100%;
        margin-top: 16px;
        margin-bottom: 8px;
        border: 1px dashed #d9d9d9;
        color: rgba(0, 0, 0, .65);
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        line-height: 30px;
        &:hover {
            color: #40a9ff;
            background-color: #fff;
            border-color: #40a9ff;
        }
    }
    //
    .el-range-editor--medium .el-range-separator {
        font-size: 12px;
        color: #999;
    }
    //穿梭框
    .sanfan-transfer{
        width: 100%;
        .el-button{
            padding: 8px 20px;
            display: block;
        }
        .el-button+.el-button {
            margin-left: 0;
        }
    }
}

//个人中心样式
.rowTitle {
    font-weight: 400;
    margin: 0px 16px;
    padding-left: 10px;
    color: $themeColor;
    line-height: 40px;
    font-size: 18px;
    position: relative;
    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        height: 10px;
        margin-top: -5px;
        border-left: 3px solid #03a9f4;
    }
}

.help {
    padding: 20px 20px;
    .bigTitle {
        font-size: 20px;
        // text-align: center;
        padding: 30px 20px;
        font-weight: bold;
    }
    .qItem {
        margin: 0 25px;
        padding: 5px 0;
        // border-bottom: 1px dotted #dcdcdc;
        .hd {
            font-size: 14px;
            font-weight: bold;
            padding: 10px 0 0 0;
            color: #333;
            &::before {
                content: "";
                display: inline-block;
                width: 5px;
                height: 5px;
                background: #a3b1bf;
                border-radius: 100em;
                vertical-align: middle;
                margin-right: 10px;
            }
        }
        .bd {
            font-size: 14px;
            color: #666;
            padding: 10px 0 10px 15px;
            line-height: 20px;
        }
    }
    .star .el-rate__icon {
        font-size: 22px !important;
    }
}

//版权
.copyright {
    color: #9e9e9e;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    padding: 10px 0px;
    clear: both;
    a {
        color: #9e9e9e;
    }
}

//覆盖原框架样式（没办法的办法，不推荐这么搞）
.el-radio-button--mini .el-radio-button__inner {
    padding: 7px 7px;
}

.el-input-group__append,
.el-input-group__prepend {
    padding: 0px 10px;
}


/* chrome */

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
    margin: 0;
}


/* Firefox */

input[type=number] {
    -moz-appearance: textfield;
}

// .el-loading-mask {
//   // top: 60px;
//   // left: 250px;
// }
// .el-loading-spinner .path{
//   stroke: #ffffff;
// }
// .el-loading-spinner .el-loading-text{
//   color: #fff;
// }
.ml5 {
    margin-left: 5px;
}

.mr5 {
    margin-right: 5px;
}

.ml10 {
    margin-left: 10px;
}

.mr10 {
    margin-right: 10px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}
.mb20 {
    margin-bottom: 20px;
}

.mt20 {
    margin-top: 20px;
}

.dTable {
    display: table;
    width: 100%;
}

.dRow {
    display: table-row;
}

.dCell {
    display: table-cell;
    padding: 5px;
}


/*通用样式*/

.align_l {
    text-align: left !important
}

.align_r {
    text-align: right !important
}

.align_c {
    text-align: center !important
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clear {
    clear: both;
}

.fc-red {
    color: #F56C6C !important
}

.fc-blue {
    color: #66b1ff !important;
}

.fc-yellow {
    color: #E6A23C !important;
}

.fc-green {
    color: #67C23A !important;
}

.fc-gray {
    color: #999 !important
}

.f10 {
    font-size: 10px !important;
}

.f12 {
    font-size: 12px !important;
}

.f14 {
    font-size: 14px !important;
}

.f16 {
    font-size: 16px !important;
}

.f18 {
    font-size: 18px !important;
}

.f20 {
    font-size: 20px !important;
}

.f22 {
    font-size: 22px !important;
}

.f24 {
    font-size: 24px !important;
}

.f26 {
    font-size: 26px !important;
}

.f28 {
    font-size: 28px !important;
}

.f30 {
    font-size: 30px !important;
}

.bgColor {
    background: #fff;
}